// 表单
let login = document.getElementById('login');
let loginA = document.querySelectorAll('.login');

let register = document.getElementById('register');
let registerA = document.querySelectorAll('.register');

//定义函数清除所有的boder-bottom的样式
function clear() {
    loginA.forEach(item => {
        item.style.border = 'none';
    })

    registerA.forEach(item => {
        item.style.border = 'none';
    })
}

//每次点击前，都清除已经出现的样式
function clearSpan() {
    let inspan = document.querySelectorAll('.inspan');
    inspan.forEach(item => {
        item.classList.remove('inspan');
    })
}

//输入错误时，添加一个span
function err(ele, mes) {
    if (ele.firstElementChild.nextElementSibling) {
        ele.removeChild(ele.firstElementChild.nextElementSibling);
    }
    let span = document.createElement('span');
    span.innerHTML += mes;
    ele.appendChild(span);
    span.classList.add('inspan');
}



loginA.forEach(item => {
    item.onclick = function () {
        register.style.display = 'none';
        login.style.display = 'block';
        clear();
        loginA[0].style.borderBottom = '4px solid #fd6d1c';
        loginA[1].style.borderBottom = '4px solid #fd6d1c';
    }
})

registerA.forEach(item => {
    item.onclick = function () {
        login.style.display = 'none';
        register.style.display = 'block';
        clear();
        registerA.forEach(item => {
            item.style.borderBottom = '4px solid #fd6d1c';
        })

    }
})




let loginID;
let loginPsw
// 获取login的邮箱，
let btn1 = document.getElementById('btn1');
btn1.onclick = function () {
    // ID的输入值
    loginID = document.login.uname.value;

    //获取密码框值
    loginPsw = document.login.pwd.value;
}

//使用new FormData（this） 获取输入框的值


document.login.onsubmit = function (event) {

    event.preventDefault();
    clearSpan();


    //选中阅读项目的细节
    let arguments = document.querySelectorAll('.che');

    if (!/^[a-zA-Z0-9]|[._]{4,19}$/.test(loginID)) {
        let uname = document.getElementById('uname');
        err(uname, '账号格式不正确')
        return;
    }

    //4-16位密码
    if (!/^[a-zA-Z0-9_-]{4,16}$/.test(loginPsw)) {
        let pwd = document.getElementById('pwd');
        err(pwd, '密码格式不正确!');
        return;
    }

    if (!arguments[0].checked) {
        let che = document.getElementById('che');
        //没勾选同意
        err(che, '请认真阅读协议并勾选!');
        return;
    }



    //后端有效性验证
    const xhr = new XMLHttpRequest();

    xhr.onloadend = function () {
        let result = xhr.responseText;

        const data = JSON.parse(result);

        if (xhr.status == 200) {
            var userName = []
            if (data.errorCode != 1002) {
                alert('登录成功!');
                var loginMse = {
                    uname: loginID
                };
                // 添加到username
                userName.push(loginMse);
                localStorage.setItem('username', JSON.stringify(userName))
                history.go(-1);
                location.reload()
                // location.href = 'http://localhost/mi/Home/Home.html';
            } else {
                alert(data.info);
                document.login.uname.value = '';
                document.login.pwd.value = '';
            }


        } else {
            alert(data.info);
            document.login.uname.value = '';
            document.login.pwd.value = '';
        }
    }

    xhr.open('get', 'http://180.76.52.106/api/login.php?uname=' + loginID + '&password=' + loginPsw);

    xhr.send(null);




}



//获取register的值，
let country;
let phoneNumber;
let code;

let btn2 = document.getElementById('btn2');
btn2.onclick = function () {
    phoneNumber = document.register.phoneNumber.value;
    code = document.register.code.value;

}





document.register.onsubmit = function (event) {

    event.preventDefault();

    clearSpan();
    //选中阅读项目的细节
    let arguments = document.querySelectorAll('.che');


    let photo = document.getElementById('photo');

    if (code.length != 4) {
        let dcode = document.getElementById('dcode');
        err(dcode, '验证码错误!（4位）')
        return;
    }

    if (!arguments[1].checked) {
        let ar = document.getElementById('ar');
        err(ar, '请认真阅读协议并勾选!');
        return;
    }

    event.preventDefault();


    const xhr2 = new XMLHttpRequest();



    xhr2.onloadend = function () {
        let result2 = xhr2.responseText;
        const data2 = JSON.parse(result2);


        //请求成功
        if (xhr2.status == 200) {
            console.log(xhr2.responseText);
            //注册成功
            if (data2.errorCode != 1002) {
                alert('注册成功');
                location.href = 'http://localhost/mi/login/login.html';

            }
        }
    }


    xhr2.open('POST', 'http://180.76.52.106/api/register.php');

    xhr2.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');


    xhr2.send('uname=' + encodeURIComponent(phoneNumber) + '&password =' + encodeURIComponent(code));
}










